<template>
  <div class="home">
    <Banner :imgSrc="votes.cover_img"/>
    <Cell :title="votes.title"/>
    <Cell title="参与人数" :value=" votes.count+'人'"/>
    <Cell title="活动正在进行中"
          style="background: -webkit-linear-gradient(left, #ff872d 10%, #fc4b55 100%);color:#fff"/>

    <!--<div class="times">-->
        <!--<div></div>-->
        <!--<div></div>-->
        <!--<div>活动</div>-->

      <!--<CountDown style=" line-height: 3;font-size: 18px;"-->
        <!--:time="endTime"-->
        <!--format="DD 天 HH 时 mm 分 ss 秒"-->
      <!--/>-->
      <!--<Time :dateEnd="votes.date_end"></Time>-->
    <!--</div>-->
    <Cell title="主办方" value="山东省临沂市总工会" class="cTop"/>
<!--    <Cell title="适用场地" />-->
    <Cell title="活动地点" style="font-size: 13px" value="临沂市职工之家"/>
    <Cell title="报名时间" style="font-size: 12px" value="即日起开始报名, 名满为止"/>
    <Cell value="联系电话">
      <a class="phone" :href="'tel:'+votes.tel">{{ votes.tel }}</a>
      <Icon slot="right-icon" size="22" color="#11c0a3" name="phone"  class="custom-icon">
      </Icon>
    </Cell>
    <!--<Cell title="传真" value="0539-8726716" />-->
    <!--<Cell title="邮箱"  value="lyszghscb@ly.shandong.cn" />-->

    <Cell value-class="cColor" style="font-size: 13px" value="活动具体时间会以短信形式发送给报名入选者"/>
<!--    图文-->
    <!--<Info v-if="votes.activities!=''" :content="votes.activities"  title="征集时间"></Info>-->
    <!--<div class="hr"></div>-->
    <Info v-if="votes.info!=''" :content="votes.info" title="活动要求"></Info>
    <div class="hr"></div>
    <Info v-if="votes.desc!=''" :content="votes.desc" title="活动简介"></Info>
    <div class="hr"></div>
    <Info v-if="votes.activities!=''" :content="votes.activities" title="活动亮点">

    </Info> <div class="hr"></div>
    <!--<Info v-if="votes.prize!=''"
    :content="votes.prize" style="color:#fc4b55;font-weight: bold;"-->
          <!--title="缘定七夕"></Info>-->

    <Cell title="参与人员" />
    <div class="user" v-if="votes.members">
      <div v-for="(item, index) in votes.members" :key="index" class="userItem">
        <div>
          <img :src="item.headimg" alt="">
        </div>
        <div class="nickname">{{item.nickname}}</div>
      </div>

    </div>
    <div class="btn" @click="btn">立即报名</div>
  </div>
</template>

<script>
import {
  Cell, Icon, Dialog, Toast,
  // CountDown,
} from 'vant';

import wxapi from '../../api/wxapi';
import Banner from '../../components/Banner.vue';
import Info from '../../components/Info.vue';
// import Time from '../../components/Times.vue';


export default {
  name: 'home',
  components: {
    Banner,
    Cell,
    Icon,
    Info,
    // CountDown,
    // Time,
  },
  data() {
    return {
      msg: '',
      content: '',
      votes: [],
      time: 30 * 60 * 60 * 1000,
      voteStatus: 2000,
      voteMsg: '未开始',
      endTime: '',
      vid: 0,
      baseUrl: 'http://zfwx.mychebang.com/api/v1.index',
      // baseUrl: '/api',
      shareLogo: 'http://zfwx.mychebang.com/static/vote/images/glg.png',
      shareTitle: '浪漫相约•情定沂蒙',
      shareDesc: '“浪漫相约•情定沂蒙”单身职工相约“七夕”活动来了',
    };
  },
  created() {
  },
  mounted() {
    this.getVote();
    wxapi.wxRegister(this.wxRegCallback);
  },
  methods: {

    getVote() {
      this.$get(`${this.baseUrl}/voteData?id=30`).then((data) => {
        const result = data;
        this.votes = result.data;
        // this.endTime = Date.parse(result.data.date_end) - new Date().getTime();

        if (result.status === 2004 || result.status === 2005 || result.status === 2006) {
          Dialog.alert({
            message: `活动${result.msg}`,
          });
          this.voteStatus = result.code;
        }
        this.voteMsg = result.msg;
        // localStorage.setItem('uid', result.id);
        // const id = localStorage.getItem('uid');
      }).catch((err) => {
        console.log(err, 'err');
      });
    },


    btn() {
      this.$get(`${this.baseUrl}/is_vote`).then((data) => {
        const result = data;
        console.log(result, '我要报名');
        if (result.status === 2008) {
          this.$router.push({ path: '/form' });
        } else {
          Toast(`活动${result.msg}`);
        }
      }).catch((err) => {
        console.log(err);
      });
    },


    // 分享
    wxRegCallback() {
      // 用于微信JS-SDK回调
      this.wxShareTimeline();
      this.wxShareAppMessage();
    },
    wxShareTimeline() {
      // 微信自定义分享到朋友圈
      const option = {
        title: this.shareTitle, // 分享标题, 请自行替换
        link: window.location.href.split('#')[0], // 分享链接，根据自身项目决定是否需要split
        imgUrl: this.shareLogo, // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          Toast('分享成功');
        },
        error: () => {
          Toast('已取消分享');
        },
      };
      // 将配置注入通用方法
      wxapi.ShareTimeline(option);
    },
    wxShareAppMessage() {
      // 微信自定义分享给朋友
      const option = {
        title: '浪漫相约•情定沂蒙', // 分享标题, 请自行替换
        desc: this.shareDesc, // 分享描述, 请自行替换
        link: window.location.href.split('#')[0], // 分享链接，根据自身项目决定是否需要split
        imgUrl: this.shareLogo, // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          Toast('分享成功');
        },
        error: () => {
          Toast('已取消分享');
        },
      };
      // 将配置注入通用方法
      wxapi.ShareAppMessage(option);
    },

  },
};
</script>
<style lang="scss" scoped>
  .cTop{
    margin: 10px 0;
  }
  .hr{
    height: 10px;
    background: #F8F8F8;
    width: 100%;
  }
  .home {
    background: #F8F8F8;
    height: auto;
    margin-bottom: 60px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .times {
    display: flex;
    justify-content: flex-start;
    background: -webkit-linear-gradient(left, rgba(255,135,45,1) 10%, rgba(252,75,85,1) 100%);
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-top: 12px;
    & div:first-child{
      width: 96px;
      height: 50px;
      text-align: center;
      background: #ffffff;
    }
    &  div:nth-child(2){
      border-bottom: 50px solid #fff;
      border-left: 0;
      border-right: 10px solid transparent;
    }
    & > div:last-child{
      color: #fff;
      text-align: right;
      width: 100%;
      margin-right: 20px;
    }
  }
  .btn {
    background: -webkit-linear-gradient(left, rgba(255,148,0,1) 0%, rgba(255,51,84,1) 100%);
    width: 100vw;
    height: 40px;
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 5;
  }
  .cColor{
    color: #fc4b55
  }
  .user{
    height: 80px;
    width: 100vw;
    display: flex;
    flex: 1;
    .userItem {
      margin-left: 18px;
      margin-top: 12px;
    }
    .userItem > div:first-child {
      width: 40px;
      height: 40px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      overflow: hidden;
    }
    .userItem img {
      width: 100%;
      height: 100%;
      display: block;
    }
    .nickname {
      color: #666666;
      text-align: center;
      font-size: 10px;
      margin-top: 4px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 12px;
      height: 12px;
      width: 40px;
    }
  }
  .phone{
    color: #666;
  }
  .endTime {
    line-height: 1.9;
  }
  .cell_s{
    color: #ffffff;
  }
</style>
